<template>
	<view class="mainPage profit" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="backimg">
			<view class="bank">
				<view class="balancetit">我的余额 (元)</view>
				<view class="backcard" @click="tobankcard">银行卡
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/img/withnext.png">
					</image>
				</view>
			</view>
			<view class="balance">{{money.money}}</view>
			<view class="but">
				<view style="font-size: 24rpx; color: #909090;">待返利金额：<text style="font-size: 28rpx;">{{money.commission}}</text></view>
				<view class="button" @click="towithdrawal">去提现</view>
			</view>
		</view>
		<view class="tabtit" id="scrollView" :style="isTop == 1 ? 'position:fixed;top:0;z-index:99;width: 100%;background: #f4f4f4;' :''">
			<view :class="istab==''?'active':''" @click="detaileda('')">明细</view>
			<view :class="istab==2?'active':''" @click="detaileda(2)">提现记录</view>
		</view>
		<view class="content">
			<view class="contentbox" v-if="istab==''">
				<view v-if="detailedlist.length">
					<view class="contenttype" v-for="(item,index) in detailedlist" :key="index" @click="toprofitdetails(item.id,item.type,item.relation)">
						<view class="contenttext">
							<view class="term">{{item.title}}</view>
							<view class="amount" v-if="item.operation==1">+{{item.money}}</view>
							<view class="amount zhichu" v-if="item.operation==2">-{{item.money}}</view>
						</view>
						<view class="contenttext">
							<view class="time">{{item.addtime}}</view>
							<view class="source" v-if="item.is_service==1&&item.service>'0.00'&&item.type!=2">平台服务费 -{{item.service}}</view>
							<view class="source" v-if="item.is_service==1&&item.service=='0.00'&&item.type!=2">无平台服务费</view>
							<!-- <view class="source" v-if="item.is_service==1&&item.type==2"></view> -->
						</view>
					</view>
					<u-loadmore :status="status" v-if="detailedlist.length>15" :load-text="loadText" />
				</view>
				<view class="emptystate" v-else>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/icon_empty_bankcard.png"></image>
					<view class="title">暂无明细</view>
				</view>
			</view>
			<view class="contentbox" v-if="istab==2">
				<view v-if="detailedlist.length">
					<view class="contenttype" v-for="(item,index) in detailedlist" :key="index" @click="towithdrawaldetails(item.relation)">
						<view class="contenttext">
							<view class="term">{{item.title}}
								<text class="review" v-if="item.tx_status==0">审核中</text>
								<text class="reviewno" v-if="item.tx_status==2">失败</text>
							</view>
							<view class="amountsno" v-if="item.tx_status==2">-{{item.money}}</view>
							<view class="amounts" v-else>-{{item.money}}</view>
						</view>
						<view class="contenttext">
							<view class="time">{{item.addtime}}</view>
							<view class="source">余额：{{item.new_money}}</view>
						</view>
					</view>
					<u-loadmore :status="status" v-if="detailedlist.length>15" :load-text="loadText" />
				</view>
				<view class="emptystate" v-else>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/image/icon_empty_bankcard.png"></image>
					<view class="title">暂无提现记录</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "我的收益",
			istab: 1,
			money: '',
			detailedlist: '',
			page: 1,
			type: '',
			isTop: 0,
			myScroll: '',
			status: 'loadmore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有更多啦'
			},
		}
	},
	onLoad() {
		that = this
		that.detaileda(that.type)
	},
	onReachBottom() {   ///page 加载
		if (that.status == 'nomore') {
			return
		}
		console.log("触底la")
		that.status = 'loading';
		that.page = ++that.page;
		setTimeout(() => {
			that.detailed(that.type)
		}, 500)
	},
	onShow() {
		that.balances()
	},
	mounted() {
		console.log('mounted 组件挂载完毕状态===============》');
		const query = uni.createSelectorQuery().in(this);
		query.select('#scrollView').boundingClientRect(data => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			console.log("节点离页面顶部的距离为" + data.top);
			this.myScroll = data.top
		}).exec();
	},
	onPageScroll: function (e) {
		if (e.scrollTop > this.myScroll) {
			this.isTop = 1
		} else {
			this.isTop = 0
		}
	},
	methods: {
		toprofitdetails(id, type, relation) {
			console.log('type', type)
			if (type == 2) {
				uni.navigateTo({
					url: 'withdrawaldetails?relation=' + relation
				})
			} else {
				uni.navigateTo({
					url: 'profitdetails?id=' + id
				})
			}
		},
		towithdrawal() {
			uni.navigateTo({
				url: 'withdrawal?name=' + that.money.user_name + '&tomoney=' + that.money.money
			})
		},
		tobankcard() {
			uni.navigateTo({
				url: 'withdrawalaccount?name=' + that.money.user_name
			})
		},
		towithdrawaldetails(relation) {
			uni.navigateTo({
				url: 'withdrawaldetails?relation=' + relation
			})
		},
		balances() {
			that.$postAjax1('Doc_Cash_getUserMoney', {
			}, function (data) {
				that.money = data.data.data
				console.log('余额', that.money)
			})
		},
		detaileda(type) {
			that.page = 1
			that.type = type
			that.istab = type
			that.detailed(that.type)
		},
		detailed(type) {
			that.$postAjax1('Doc_Cash_moneyLogList', {
				page: that.page,
				limit: 15,
				type: type
			}, function (data) {
				if (that.page == 1) {
					that.detailedlist = data.data.data
				} else {
					that.detailedlist = that.detailedlist.concat(data.data.data)
				}
				if (data.data.data.length < 15) that.status = 'nomore';
				else that.status = 'loading';
				console.log('明细', that.detailedlist)
			})
		}
	},
}
</script>
<style scoped lang="scss">
.profit {
	padding: 24rpx 30rpx;
	background-color: #f4f4f4;
	min-height: 100vh;
	.backimg {
		// width: 690rpx;
		min-height: 278rpx;
		background-image: url(https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/img/bankimg.png);
		padding: 32rpx 40rpx;
		background-size: cover;
		.bank {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.balancetit {
				color: #323232;
				font-size: 32rpx;
			}
			.backcard {
				font-size: 28rpx;
				color: #ffffff;
				image {
					width: 12rpx;
					height: 20rpx;
					margin-left: 16rpx;
				}
			}
		}
		.balance {
			font-size: 48rpx;
			color: #323232;
			margin: 24rpx 0;
		}
		.but {
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.button {
				float: right;
				font-size: 28rpx;
				padding: 12rpx 36rpx;
				background: linear-gradient(270deg, #ff9331 0%, #fe7600 100%);
				border-radius: 33rpx;
				color: #ffffff;
			}
		}
	}
	.tabtit {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 28rpx 0;
		font-size: 30rpx;
		.active {
			background: linear-gradient(311deg, #ffbe46 0%, #ff32e6 100%);
			border-radius: 37rpx;
			color: #ffffff;
			padding: 8rpx 50rpx;
		}
	}
	.content {
		padding-bottom: 100rpx;
		.contentbox {
			box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.18);
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 24rpx 24rpx 24rpx;
			.contenttype {
				padding: 22rpx 0;
				.contenttext {
					display: flex;
					justify-content: space-between;
					padding: 4rpx;
					.term {
						color: #323232;
						font-size: 32rpx;
						.review {
							padding: 2rpx 12rpx;
							margin-left: 16rpx;
							border: 2rpx solid #f55050;
							border-radius: 8rpx;
							font-size: 26rpx;
							color: #f55050;
						}
						.reviewno {
							padding: 2rpx 12rpx;
							background: #e6e6e6;
							border-radius: 8rpx;
							font-size: 26rpx;
							color: #ffffff;
							margin-left: 16rpx;
						}
					}
					.amount {
						font-weight: 500;
						color: #f55050;
						font-size: 32rpx;
					}
					.amounts {
						font-weight: 500;
						color: #ffbe7d;
						font-size: 32rpx;
					}
					.amountsno {
						font-weight: 500;
						color: #909090;
						font-size: 32rpx;
					}
					.zhichu {
						color: #ffbe7d;
					}
					.time {
						font-size: 28rpx;
						color: #909090;
					}
					.source {
						font-size: 28rpx;
						color: #909090;
					}
				}
			}
			.emptystate {
				image {
					width: 320rpx;
					height: 220rpx;
					margin: 120rpx 160rpx 30rpx 160rpx;
				}
				.title {
					font-size: 32rpx;
					color: #909090;
					margin: 0rpx 160rpx 0rpx 160rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
